.index {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../img/bg.jpeg) no-repeat;
  background-size: 100% 100%;
  color: #FFF; }

.index .header {
  height: 1.49333rem;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0.53333rem;
  background: rgba(0, 0, 0, 0.7);
  font-size: 0.42667rem; }

.index h3 {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 0.58667rem;
  font-weight: 400; }

.tit {
  display: -webkit-box;
  display: flex;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 0.53333rem 0.53333rem 0.4rem;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center; }
  .tit a {
    width: 2.08rem;
    height: 0.66667rem;
    border: 1px solid #979797;
    border-radius: 4px;
    text-align: center;
    line-height: 0.66667rem;
    font-size: 0.32rem;
    color: #FFF; }

.index .content {
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(73, 73, 73, 0.48)), to(rgba(18, 18, 18, 0.51)));
  background-image: -webkit-linear-gradient(top, rgba(73, 73, 73, 0.48) 0%, rgba(18, 18, 18, 0.51) 100%);
  background-image: linear-gradient(-180deg, rgba(73, 73, 73, 0.48) 0%, rgba(18, 18, 18, 0.51) 100%);
  -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2); }

.plan-info .progress i {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#000000));
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #000000 100%);
  background-image: linear-gradient(-180deg, #FFFFFF 0%, #000000 100%);
  background-image: -webkit-gradient(linear, right top, left top, from(#17C5FF), to(#9F55FF));
  background-image: -webkit-linear-gradient(right, #17C5FF 0%, #9F55FF 100%);
  background-image: linear-gradient(-90deg, #17C5FF 0%, #9F55FF 100%); }

.train-info .progress i {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#000000));
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #000000 100%);
  background-image: linear-gradient(-180deg, #FFFFFF 0%, #000000 100%);
  background-image: -webkit-gradient(linear, right top, left top, from(#FF7A55), to(#17C5FF));
  background-image: -webkit-linear-gradient(right, #FF7A55 0%, #17C5FF 100%);
  background-image: linear-gradient(-90deg, #FF7A55 0%, #17C5FF 100%); }

.examiner .wapper-item {
  position: relative; }
  .examiner .wapper-item span {
    position: absolute;
    right: 0.13333rem;
    top: -0.13333rem;
    font-size: 0.26667rem;
    color: #D19E23; }

.examiner .progress i {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#000000));
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #000000 100%);
  background-image: linear-gradient(-180deg, #FFFFFF 0%, #000000 100%);
  background-image: -webkit-gradient(linear, right top, left top, from(#D09E22), to(#FF7A55));
  background-image: -webkit-linear-gradient(right, #D09E22 0%, #FF7A55 100%);
  background-image: linear-gradient(-90deg, #D09E22 0%, #FF7A55 100%); }

.examiner .label-tit {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: -0.26667rem;
  padding-right: 0.13333rem;
  text-align: right;
  color: #D19E23;
  font-size: 0.32rem; }

.exam-score .progress {
  background: none !important; }

.exam-score i {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#000000));
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #000000 100%);
  background-image: linear-gradient(-180deg, #FFFFFF 0%, #000000 100%);
  background-image: -webkit-gradient(linear, left top, right top, color-stop(13%, #D0AD22), color-stop(81%, #F07C97));
  background-image: -webkit-linear-gradient(left, #D0AD22 13%, #F07C97 81%);
  background-image: linear-gradient(90deg, #D0AD22 13%, #F07C97 81%); }

.exam-score span {
  position: absolute;
  top: -0.08rem;
  color: #F5A623;
  text-indent: 0.13333rem; }

.exam-score .min {
  color: #7ED321; }

.index .content .progress {
  position: relative;
  border-radius: 0.13333rem; }

.index .content .progress i {
  position: absolute;
  left: 0;
  height: 100%;
  border-radius: 5px; }

.index .content label {
  font-size: 0.32rem;
  color: rgba(255, 255, 255, 0.6); }

.index .content .mui-slider-group {
  margin-bottom: 0.53333rem; }

.index .content .statis {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-around;
  margin-top: 0.90667rem;
  border-top: 1px solid rgba(153, 153, 153, 0.5);
  border-bottom: 1px solid rgba(153, 153, 153, 0.5);
  text-align: center;
  line-height: 0.6rem; }

.index .content .statis > div {
  width: 33.3%;
  padding: 0.53333rem 0; }

.index .content .statis > div:nth-child(1), .index .content .statis > div:nth-child(2) {
  border-right: 1px solid rgba(153, 153, 153, 0.5); }

.index .content .statis > div > div:nth-child(1) {
  font-size: 0.32rem; }

.index .content .statis > div > div:nth-child(2) {
  font-size: 0; }

.index .content .statis > div > div:nth-child(2) span {
  font-size: 0.53333rem; }

.index .content .statis > div > div:nth-child(2) i {
  font-size: 0.32rem; }

.index .plan .statis {
  margin-top: 0.26667rem; }

.index .plan .wapper {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 0.53333rem; }

.index .plan .wapper .wapper-item {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  width: 100%;
  height: 0.93333rem;
  padding-top: 0.26667rem; }

.index .plan .wapper .wapper-item .progress {
  background: rgba(89, 89, 89, 0.4);
  width: 7.33333rem;
  height: 0.16rem;
  float: left;
  margin-left: 0.2rem;
  margin-top: 0.09333rem; }

.index .plan .wapper .wapper-item label {
  display: block;
  width: 1.06667rem;
  float: left;
  overflow: hidden; }

.index .plan .wapper .wapper-item i {
  top: 0; }

.index .score .wapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-around;
  height: 5.33333rem; }

.index .score .wapper > div {
  position: relative;
  width: 20%;
  margin-top: 1.06667rem; }

.index .score .wapper > div:nth-child(1) span {
  color: #7ED321; }

.index .score .wapper > div:nth-child(2) span {
  color: #F5A623; }

.index .score .wapper label, .index .score .wapper span, .index .score .wapper .progress, .index .score .wapper .empty {
  width: 100%;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  text-align: center; }

.index .score .wapper span {
  margin-bottom: 0.66667rem;
  font-size: 0.37333rem;
  color: rgba(255, 255, 255, 0.6); }

.index .score .wapper label {
  bottom: 0; }

.index .score .wapper .empty {
  bottom: 0.53333rem;
  font-size: 0.37333rem;
  color: rgba(255, 255, 255, 0.7); }

.index .score .wapper .progress {
  bottom: 0.53333rem;
  width: 0.16rem;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#000000));
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #000000 100%);
  background-image: linear-gradient(-180deg, #FFFFFF 0%, #000000 100%);
  background-image: -webkit-gradient(linear, right top, left top, from(#9F55FF), to(#17C5FF));
  background-image: -webkit-linear-gradient(right, #9F55FF 0%, #17C5FF 100%);
  background-image: linear-gradient(-90deg, #9F55FF 0%, #17C5FF 100%);
  border-radius: 0.13333rem; }

.index .complete .wapper {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  justify-content: space-around; }

.index .complete .wapper > div {
  width: 20%;
  text-align: center; }

.index .complete .wapper .progress {
  position: relative;
  width: 0.96rem;
  height: 3.41333rem;
  margin: 0 auto; }

.index .complete .wapper .progress .rate {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  border-radius: 0.13333rem; }

.index .complete .wapper .progress .schj {
  background: #9F55FF; }

.index .complete .wapper .progress .cpld {
  background: #19C4FF; }

.index .complete .wapper .progress .ztmn {
  background: #22D0CD; }

.index .complete .wapper .progress .yfln {
  background: #83E7AD; }

.index .complete .wapper .progress .jpgm {
  background: #FED147; }

.index .complete .wapper .progress i {
  position: absolute;
  left: 0;
  top: 0;
  width: 0.96rem;
  padding: 0;
  background: rgba(89, 89, 89, 0.5);
  border-radius: 0.13333rem 0.13333rem 0 0; }

.index .complete .wapper label {
  display: block;
  margin-top: 0.26667rem;
  color: rgba(255, 255, 255, 0.6); }

.index .legend {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 2rem;
  display: -webkit-box;
  display: flex;
  justify-content: space-around; }

.index .legend div:nth-child(1) i {
  background: url(../img/ywc.png) no-repeat 0 0;
  background-size: 100% 100%;
  border-radius: 2px; }

.index .legend div:nth-child(2) i {
  background: rgba(89, 89, 89, 0.7);
  background-size: 100% 100%;
  border-radius: 2px; }

.index .legend div:nth-child(3) i {
  background: url(../img/ygh.png) no-repeat 0 0;
  background-size: 100% 100%;
  border-radius: 2px; }

.index .legend i {
  display: inline-block;
  width: 0.26667rem;
  height: 0.26667rem; }

.index .legend span {
  display: inline-block;
  font-size: 0.37333rem;
  color: rgba(255, 255, 255, 0.6); }

.index .footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(73, 73, 73, 0.48)), to(rgba(18, 18, 18, 0.51)));
  background-image: -webkit-linear-gradient(top, rgba(73, 73, 73, 0.48) 0%, rgba(18, 18, 18, 0.51) 100%);
  background-image: linear-gradient(-180deg, rgba(73, 73, 73, 0.48) 0%, rgba(18, 18, 18, 0.51) 100%);
  -webkit-box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2);
  box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.2); }

.index .footer .btn-wrap {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
  padding: 0.5rem 0.8rem 0;
  justify-content: space-around; }

.index .footer .btn-wrap > a {
  display: block;
  width: 33.3%;
  padding: 0.18667rem 0 0.53333rem;
  text-align: center; }

.index .footer .btn-wrap img {
  display: block;
  width: 1.06667rem;
  height: 1.06667rem;
  margin: 0 auto; }

.index .footer .btn-wrap label {
  font-size: 0.37333rem;
  color: rgba(255, 255, 255, 0.8); }

.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 1.01333rem;
  background: rgba(0, 0, 0, 0.8); }

.mask .sign {
  position: relative;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-70%);
  -ms-transform: translateY(-70%);
  transform: translateY(-70%);
  background-image: -webkit-gradient(linear, left bottom, left top, from(#EEEEEE), to(#FFFFFF));
  background-image: -webkit-linear-gradient(bottom, #EEEEEE 0%, #FFFFFF 100%);
  background-image: linear-gradient(0deg, #EEEEEE 0%, #FFFFFF 100%);
  -webkit-box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.3);
  border-radius: 0.16rem;
  text-align: center;
  font-size: 0.42667rem; }

.mask .sign > div {
  padding: 1.38667rem 0 1.06667rem;
  color: #333; }

.mask .sign a {
  display: block;
  border-top: 1px solid rgba(204, 204, 204, 0.8);
  padding: 0.45333rem 0; }

.mask .sign img {
  position: absolute;
  width: 1.6rem;
  height: 1.6rem;
  left: 50%;
  top: -0.8rem;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  background: url(../img/ok1.png) no-repeat 0 0;
  background-size: 100% 100%; }

.remind {
  position: absolute;
  right: 28px;
  top: 5px;
  width: 22px;
  height: 22px;
  background: #ff3b30;
  border-radius: 50%;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  color: #fff; }

.index .mui-indicator {
  width: 0.08rem;
  height: 0.08rem; }

.index .mui-indicator.mui-active {
  width: 0.34667rem;
  border-radius: 6px; }

.index .average {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  height: 0.66667rem;
  padding: 0 0.4rem; }
  .index .average label {
    display: block;
    width: 1.06667rem;
    height: 100%;
    float: left; }
  .index .average div {
    position: relative;
    width: 7.33333rem;
    float: left;
    margin-left: 0.2rem; }
  .index .average i, .index .average span {
    position: absolute; }
  .index .average span {
    width: 3.06667rem;
    text-align: center;
    margin-left: -2rem;
    font-size: 0.34667rem;
    line-height: 2; }
  .index .average i {
    width: 1px;
    border: 1px dashed #FFF; }

.index .echart-label {
  margin: 0.26667rem 0;
  display: -webkit-box;
  display: flex;
  justify-content: space-around; }
  .index .echart-label li {
    text-align: center; }
  .index .echart-label i {
    display: inline-block;
    width: 0.26667rem;
    height: 0.26667rem;
    margin-bottom: 2px;
    border-radius: 2px; }
  .index .echart-label li:nth-child(1) i {
    background: #FFA700; }
  .index .echart-label li:nth-child(2) i {
    background: #CBFF00; }
  .index .echart-label li:nth-child(3) i {
    background: #00D7FF; }
  .index .echart-label li:nth-child(4) i {
    background: #F887F6; }
  .index .echart-label li:nth-child(5) i {
    background: #D14343; }
  .index .echart-label li:nth-child(6) i {
    background: #A680E6; }
